<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <div class="aside-box contain">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基本信息"
          name="first"
        ><el-form>
           <el-form-item label="员工编号">
             <span v-if="flag === 0">{{ driverForm.userId }}</span>
             <el-input
               v-if="flag === 1"
               v-model="driverForm.userId"
               disabled
             ></el-input>
           </el-form-item>
           <el-form-item label="司机名称">
             <span v-if="flag === 0">{{ driverForm.name }}</span>
             <el-input
               v-if="flag === 1"
               v-model="driverForm.name"
               disabled
             ></el-input>
           </el-form-item>
           <el-form-item label="所属机构">
             <span v-if="flag === 0">{{ driverForm.agency.name }}</span>
             <el-input
               v-if="flag === 1"
               v-model="driverForm.agency.name"
               disabled
             ></el-input>
           </el-form-item>
           <el-form-item label="电话">
             <span v-if="flag === 0">{{ driverForm.mobile }}</span>
             <el-input
               v-if="flag === 1"
               v-model="driverForm.mobile"
               disabled
             ></el-input>
           </el-form-item>
           <el-form-item label="年龄">
             <span v-if="flag === 0">{{ driverForm.age }}</span>
             <el-input
               v-if="flag === 1"
               v-model="driverForm.age"
             ></el-input>
           </el-form-item>
         </el-form>
          <el-button
            v-if="flag === 0"
            type="danger"
            @click="flag = 1"
          >编辑</el-button>
          <el-button
            v-if="flag === 1"
            @click="driverSubmit"
          >保存</el-button>
          <el-button
            v-if="flag === 1"
            @click="flag = 0"
          >取消</el-button>
        </el-tab-pane>
        <el-tab-pane
          label="驾驶证信息"
          name="second"
        >
          <el-form>
            <el-form-item label="驾驶证号">
              <span v-if="flag === 0">{{ driverLicense.licenseNumber }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.licenseNumber"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="准驾车型">
              <span v-if="flag === 0">{{ driverLicense.allowableType }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.allowableType"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="初次领证日期">
              <span v-if="flag === 0">{{ driverLicense.initialCertificateDate }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.initialCertificateDate"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="驾驶证有效期限">
              <span v-if="flag === 0">{{ driverLicense.validPeriod }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.validPeriod"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="驾龄">
              <span v-if="flag === 0">{{ driverLicense.driverAge }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.driverAge"
              ></el-input>
            </el-form-item>
            <el-form-item label="驾驶证类型">
              <span v-if="flag === 0">{{ driverLicense.licenseType }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.licenseType"
              ></el-input>
            </el-form-item>
            <el-form-item label="从业资格证">
              <span v-if="flag === 0">{{ driverLicense.qualificationCertificate }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.qualificationCertificate"
              ></el-input>
            </el-form-item>
            <el-form-item label="入场证信息">
              <span v-if="flag === 0">{{ driverLicense.passCertificate }}</span>
              <el-input
                v-if="flag === 1"
                v-model="driverLicense.passCertificate"
              ></el-input>
            </el-form-item><br>
            <el-form-item
              class="one"
              label="图片"
            >
              <!-- 图片上传以及略缩图,预览图 -->
              <el-upload
                action="#"
                :file-list="picList"
                list-type="picture-card"
                :auto-upload="false"
                :http-request="httpRequest"
                :limit="2"
                :on-exceed="handleExceed"
              >
                <i
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <div
                  slot="file"
                  slot-scope="{file}"
                >
                  <!-- <div
                  v-for="item in picList"
                  :key="item"
                > -->
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="flag === 1"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img
                  width="100%"
                  :src="dialogImageUrl"
                  alt=""
                >
              </el-dialog>
            </el-form-item>
          </el-form>
          <el-button
            v-if="flag === 0"
            type="danger"
            @click="flag = 1"
          >编辑</el-button>
          <el-button v-if="flag === 1">保存</el-button>
          <el-button
            v-if="flag === 1"
            @click="flag = 0"
          >取消</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { driverDetail, driverLicenseDetail, driverDetailUpdate } from '@/api/transit'
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      activeName: 'first',
      driverForm: {
        agency: {}
      },
      driverLicense: {},
      flag: 0,
      picList: []
    }
  },
  async created() {
    const res = await driverDetail(this.id)
    this.driverForm = res.data
    const ele = await driverLicenseDetail(this.id)
    console.log(ele.data.picture.split(','))
    this.picList = ele.data.picture.split(',')
    this.picList = this.picList.map(item => {
      return {
        url: item
      }
    })
    this.driverLicense = ele.data
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      this.flag = 0
    },
    async driverSubmit() {
      const res = await driverDetailUpdate(this.driverForm.id, this.driverForm)
      this.$message(res.msg)
      this.flag = 0
      const ele = await driverDetail(this.id)
      this.driverForm = ele.data
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    httpRequest(file) {

    },
    handleExceed(files, fileList) {
      this.$message.error('最多上传两个文件')
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.driver-detail {
  ::v-deep  .el-container{
    flex-direction: column;
    margin-left: 0px;
    height: 900px;
  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    ::v-deep  .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
    .el-form{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .el-form-item{
        width: 33%;
        padding-right: 40px;
      }
      .el-form-item.one{
        flex-basis: 100%;
      }
    }
  }
  .contain{
    background-color: #fff;
    margin: 20px 30px;
  }
}
</style>
